table {
  width: 100%;
  background-color: var(--color-table-background);
  border-radius: 5px;
  overflow: hidden;

  td, th {
    padding: 0.5rem 0.5rem;

    &.number {
      text-align: right;
    }

    &.center {
      text-align: center;
    }
  }

  thead {
    tr {
      background-color: var(--color-table-header-background);
    }

    th {
      text-align: left;
      font-weight: bold;
    }
  }

  tbody {
    tr {
      background-color: var(--color-table-background);
      border-bottom: 1px solid var(--color-border-light);

      &:hover {
        background: var(--color-table-background-hover);
      }

      &:nth-of-type(odd) {
        background-color: var(--color-table-background-alternate);

        &:hover {
          background: var(--color-table-background-hover);
        }
      }

      &.active {
        background-color: var(--color-table-background-active);

        &:hover {
          background-color: var(--color-table-background-active);
        }
      }
    }

    td {
      vertical-align: middle;
    }
  }
}
